<!DOCTYPE html>
<body>
    <style type="text/css">
        body{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url("https://ling_boogie.gitee.io/peasonal_pic/bg-7.png");
        }
    </style>
    <main>
        <script type="text/javascript" src="https://ling_boogie.gitee.io/peasonal_pic/iconfont.js">
        </script>
        <style>
        .icon {
            width: 1.5em; 
            height: 1.5em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
            position: absolute;
            left: 0px ;
            top: 10px ;
            font-size: 20px ;
            cursor: pointer;
        }
        @-webkit-keyframes roteZInf{
          0%{ }
          100%{ 
            transform: rotateZ(360deg);
          }
        }
        @keyframes roteZInf{
          0%{  }
          100%{ transform: rotateZ(360deg); }
        }
        </style>
        <style type="text/css">
            main{
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                min-height: 80vh ;
                width:800px;
                -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
                box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);
                border-radius: 5px;
                border:orange 1px solid;
                background: #ffffff ;
            }
        </style>
        <img src="https://ling_boogie.gitee.io/peasonal_pic/head.jpg" style="width:800px;">
        <div style="padding: 5px 20px;">
            <p style="
            position: absolute;
            color: white;
            float: left;
            z-index: 999;
            background: orange;
            padding: 5px 30px;
            margin: -25px auto 0 ;
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.30)">
                阿凌
            </p>
            <br>
            <p>
                {{name}} 在
                <h3>
                <a style="text-decoration: none;color: orange " target="">
                {{title}}
                </a>
                </h3>
                <span>
                    {{body}}
                </span>
            </p>
            <br>
            <style type="text/css">
                .hidden-p:hover{
                    color: #636e72 !important;
                }
            </style>
            <p  class="hidden-p" style="
                color: transparent;
                transition: 0.3s ;
                cursor: pointer;
            "> 但其实是没什么用的啦，因为我也没给登录的好兄弟设置其他功能呢~\-q'w'q-/
            </p>
        </div>
        <div class="roteZInf5S" style="
            width: 1.5em; 
            height: 1.5em;
            position: absolute;
            left: -10px ;
            top: 468px ;
            font-size: 20px ;
            display: block;
            transform:  rotateZ(0deg);
            animation-name: roteZInf;
            animation-duration: 5s;
            animation-delay: 0s;
            animation-play-state: running;
            animation-iteration-count: infinite ;
            animation-timing-function: ease-in-out;
        ">
            <svg class="icon icon-sakura-flower" aria-hidden="true">
                <use xlink:href="#icon-sakura-flower"></use>
            </svg>
        </div>
    </main>
</body>
